<template>
	<view style="height: 100%;">
		<view class="a5">
			<view class="a6" @click="sendResume" v-if="!resumeFlag">
				<view class="a7">&#xe652;</view>
				<view class="a8">发简历</view>
			</view>
			<view class="a6" v-if="resumeFlag">
				<view class="a7_1">&#xe652;</view>
				<view class="a8_1">发简历</view>
			</view>
			<view class="a9" @click="sendWeChat" v-if="!weChatFlag">
				<view class="b1">&#xe614;</view>
				<view class="b2">换微信</view>
			</view>
			<view class="a9" v-if="weChatFlag">
				<view class="b1_1">&#xe614;</view>
				<view class="b2_1">换微信</view>
			</view>
			<view class="b3" @click="sendPhone">
				<view class="b4">&#xe692;</view>
				<view class="b5">发电话</view>
			</view>
			<view class="b6">
				<view class="b7" @click="sendRefuse">&#xe69e;</view>
				<view class="b8">不合适</view>
			</view>
		</view>
		<view class="b9">如对方私下要求转账/比特币/虚拟货币/投资/等，均涉嫌诈骗，请谨慎！</view>
		<scroll-view
			scroll-y
			:scroll-into-view="currentMessage"
			:refresher-enabled="true"
			@refresherrefresh="refresh"
			:refresher-triggered="refreshFlag"
			:class="emojiShow || moreShow ? 'sv_emoji' : 'sv'"
		>
			<view v-for="(item, index) in messageData.messageList" :key="index">
				<!-- 文字消息 -->
				<view class="c1" :id="item.id" v-if="item.flow == 'in' && item.type == 'TIMTextElem'">
					<view><image :src="item.avatar" class="c2"></image></view>
					<view class="c3">
						<view class="c4"></view>
						<view class="c5">{{ item.payload.text }}</view>
					</view>
				</view>
				<view class="d3" :id="item.id" v-if="item.flow == 'out' && item.type == 'TIMTextElem'">
					<view class="c3_1">
						<view class="c5_1">{{ item.payload.text }}</view>
					</view>
					<view class="c4_1"></view>
					<view><image :src="myProfile.avatar" class="c2"></image></view>
				</view>
				<!-- 图片消息 -->
				<view class="d3" :id="item.id" v-if="item.flow == 'out' && item.type == 'TIMImageElem'">
					<image :src="item.imageUrl" style="width: 400upx;margin-right: 30upx;height: 200upx;"></image>
					<view><image :src="myProfile.avatar" class="c2"></image></view>
				</view>
				<!-- 语音消息 -->
				<view class="d3" :id="item.id" v-if="item.flow == 'out' && item.type == 'TIMSoundElem'">
					<view class="c3_1" @click="playVioce(item.payload.url)">
						<view class="c5_1">
							{{ item.payload.second }}〞
							<text style="font-family: iconfont;">&#xe6f5;</text>
						</view>
					</view>
					<view class="c4_1"></view>
					<view><image :src="myProfile.avatar" class="c2"></image></view>
				</view>
				<!-- 视频消息 -->
				<view class="d3" :id="item.id" v-if="item.flow == 'out' && item.type == 'TIMVideoFileElem'">
					<video :src="item.payload.videoUrl" style="max-width: 400upx;margin-right: 30upx;max-height: 200upx;"></video>
					<view><image :src="myProfile.avatar" class="c2"></image></view>
				</view>
				<!-- 简历消息 -->
				<view class="d4" :id="item.id" v-if="item.type == 'TIMCustomElem' && item.flow == 'out' && item.payload.data == 'resume'">
					{{ item.payload.description }}
				</view>
				<!-- 对方求简历消息 -->
				<view class="c1" :id="item.id" v-if="item.type == 'TIMCustomElem' && item.flow == 'in' && item.payload.data == 'getResume'">
					<view><image :src="avatar" class="c2"></image></view>
					<view class="c3" v-if="!resumeFlag">
						<view class="c4"></view>
						<view class="c5">
							<view class="d5">
								<view style="width: 60upx;">
									<image src="https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/jl.png" class="d6"></image>
								</view>
								<view class="d7">我想要一份您的附件简历到我的邮箱，您是否同意</view>
							</view>
							<view class="d8">
								<view class="d9" @click="sendRefuseResume">拒绝</view>
								<view class="e1"></view>
								<view class="e2" @click="sendResume">同意</view>
							</view>
						</view>
					</view>
					<!-- 求简历置灰 -->
					<view class="c3" v-if="resumeFlag">
						<view class="c4"></view>
						<view class="c5_2">
							<view class="d5">
								<view style="width: 60upx;">
									<image src="https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/jl_2.png" class="d6"></image>
								</view>
								<view class="d7">我想要一份您的附件简历到我的邮箱，您是否同意</view>
							</view>
							<view class="d8">
								<view class="d9">拒绝</view>
								<view class="e1"></view>
								<view class="e2_2">同意</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 换微信消息 -->
				<view class="d4" :id="item.id" v-if="item.type == 'TIMCustomElem' && item.flow == 'out' && item.payload.data == 'wechat'">
					请求交换微信已发送
				</view>
				<!-- 微信号显示 -->
				<view class="c1_2" :id="item.id" v-if="item.type == 'TIMCustomElem' && item.payload.data == 'fromWechat'">
					<view class="c3_2">
						<view class="c5">
							<view class="d5">
								<image src="https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/wx.png" class="d6"></image>
								<view class="d7">{{ nick }}的微信号: {{ item.payload.description }}</view>
							</view>
							<view class="d8"><view class="e2_1" @click="copyWeChat(item.payload.description)">复制微信号</view></view>
						</view>
					</view>
				</view>
				<!-- 换电话消息 -->
				<view class="d4" :id="item.id" v-if="item.type == 'TIMCustomElem' && item.flow == 'out' && item.payload.data == 'phone'">
					请求交换电话已发送
				</view>
				<!-- 拒绝交换微信 -->
				<view
					v-if="item.type == 'TIMCustomElem' && item.flow == 'in' && item.payload.data == 'refuseWechat'"
					:id="'id' + index"
					class="d4"
				>
					对方拒绝与您交换微信
				</view>
				<!-- 拒绝发送简历 -->
				<view
					v-if="item.type == 'TIMCustomElem' && item.flow == 'out' && item.payload.data == 'refuseResume'"
					:id="'id' + index"
					class="d4"
				>
					已拒绝对方简历请求
				</view>
				<!-- 不合适 -->
				<view class="d4" :id="item.id" v-if="item.type == 'TIMCustomElem' && item.flow == 'out' && item.payload.data == 'refuse'">
					已将此岗位标记为不合适
				</view>
			</view>
			<!-- 占位符 -->
			<view style="height: 30upx;"></view>
		</scroll-view>
		<!-- 输入框 -->
		<view class="c6">
			<view class="c7" @click="call">&#xe6fc;</view>
			<view><input type="text" :class="message ? 'c8' : 'c8_1'" v-model="message" /></view>
			<view class="c9" @click="emojiShowClick">&#xec80;</view>
			<view class="d2" v-if="!message" @click="moreShowClick">&#xe603;</view>
			<uni-transition :show="message" modeClass="slide-right">
				<view class="d1" v-if="message" @click="sendMessage">发送</view>
			</uni-transition>
		</view>
		<!-- 表情包 -->
		<view v-if="emojiShow" class="emoji">
			<view v-for="(item, index) in emoicon" :key="index" @click="emojiClick(item)">
				<view class="emoji_img">{{ item }}</view>
			</view>
			<!-- 占位 -->
			<view style="height: 120upx;"></view>
		</view>
		<!-- 更多 -->
		<view v-if="moreShow" class="e3">
			<view class="e4" @click="sendImage">
				<view class="e5">&#xe626;</view>
				<view class="e6">图片</view>
			</view>
			<view class="e4" @longpress="startVioce" @touchend="endVioce">
				<view :class="isRecord ? 'e5_1' : 'e5'">&#xe905;</view>
				<view class="e6" v-if="!isRecord">语音</view>
				<view class="e6" v-if="isRecord" style="color:#F76F3F ;">录音中{{ intIntervalTime }}s</view>
			</view>
			<view class="e4" @click="sendVideo">
				<view class="e5">&#xe622;</view>
				<view class="e6">视频</view>
			</view>
			<view class="e4">
				<view class="e5">&#xe6fc;</view>
				<view class="e6">视频通话</view>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp()
// import TIM from 'tim-js-sdk'
import TIM from 'tim-wx-sdk'
import { setTokenStorage } from '../../utils/token'

import logger from '../../utils/logger'

const { getTokenStorage } = require('../../utils/token.js')
import { genTestUserSig } from '../../debug/GenerateTestUserSig.js'
const recorderManager = uni.getRecorderManager()
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true
export default {
	data() {
		return {
			to: '',
			autoHeight: 0,
			messageData: {
				messageList: [
					{
						id: '1',
						avatar: '',
						flow: 'in',
						type: 'TIMTextElem',
						payload: { text: '您好，想和您沟通一下' }
					},
					{
						id: '2',
						avatar: '',
						flow: 'out',
						type: 'TIMTextElem',
						payload: { text: '您好' }
					}
				]
			},
			nick: '',
			avatar: '',
			message: '',
			scrollHeight: '',
			conversationId: '',
			currentMessage: '',
			myProfile: '',
			imgList: [],
			//刷新标记
			refreshFlag: false,
			//对方UserID
			userId: '',
			//是否已操作求简历消息
			resumeFlag: false,
			//是否已操作换微信消息
			weChatFlag: false,
			//表情显示
			emojiShow: false,
			emoicon: [
				'😁',
				'😋',
				'😜',
				'😉',
				'😌',
				'😅',
				'😳',
				'😊',
				'😝',
				'😰',
				'😠',
				'😩',
				'😲',
				'😞',
				'😭',
				'😍',
				'😖',
				'😱',
				'😡',
				'😚',
				'😤',
				'🐼',
				'🐲',
				'😺',
				'😸',
				'😹',
				'😽',
				'🙀',
				'🐴',
				'🐮',
				'🍺',
				'🔥',
				'💔',
				'🉑',
				'💢',
				'💣',
				'💩',
				'💪',
				'👍',
				'👊',
				'👋',
				'👌',
				'👐'
			],
			//更多显示
			moreShow: false,
			// 记录状态,录音中或者是未开始
			isRecord: false,
			intervalTime: 0,
			timer: '',
			sendVioceFlag: false
		}
	},
	async onLoad(options) {
		return
		this.tim = uni.$TUIKit
		console.log(options, '---------')
		await this.loginTIM(uni.getStorageSync('openid'))
		this.conversationId = options.conversationID
		this.to = options.userID
		var that = this
		recorderManager.onStop(function(res) {
			if (that.sendVioceFlag) {
				const message = that.tim.createAudioMessage({
					to: that.to,
					conversationType: TIM.TYPES.CONV_C2C,
					payload: {
						file: res
					}
				})
				that.tim.sendMessage(message).then(function(res) {
					that.getMessage(that.conversationId)
				})
			}
		})
		this.autoHeight = uni.getSystemInfoSync().statusBarHeight

		let option = {
			SDKAppID: 1400689974
		}
		uni.$on('conversationData', function(options) {
			console.log(options, '---conversationData')
			// that.conversationId = options.conversationID;
			//对方资料
			that.nick = options.userProfile.nick
			that.avatar = options.userProfile.avatar
			that.userId = options.userProfile.userID
		})
		this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
		uni.$emit('send')

		//获取个人资料
		this.getMyProfile()

		this.updateMyProfile()
		//清空未读
		//this.clearUnRead();
	},
	onShow() {
		//获取个人资料
		this.getMyProfile()

		this.updateMyProfile()
	},
	computed: {
		intIntervalTime() {
			// 用于显示整数的秒数
			console.log(Math.round(this.intervalTime))
			return Math.round(this.intervalTime)
		}
	},
	onSDKReady({ name }) {
		const isSDKReady = name === uni.$TUIKitEvent.SDK_READY ? true : false
		uni.$emit('isSDKReady', {
			isSDKReady: true
		})
	},
	methods: {
		updateMyProfile() {
			var that = this
			let userInfo = uni.getStorageSync('userInfo')

			console.log(userInfo)
			let onSdkReady = function(event) {
				const promise = uni.$TUIKit.updateMyProfile({
					nick: userInfo.nickname,
					avatar: userInfo.avatar
				})
				promise.then(imResponse => {
					console.log('资料更新成功')
					that.updateMyProfile()
				})
			}
			that.tim.on(TIM.EVENT.SDK_READY, onSdkReady)
		},
		async loginTIM(openId) {
			const userID = openId
			const userSig = genTestUserSig(userID).userSig
			console.log(userSig, 2222)
			const SDKAppID = app.globalData.SDKAppID
			logger.log(`TUI-login | login  | userSig:${userSig} userID:${userID}`, 11111111111)
			// #ifdef  APP-PLUS
			uni.$aegis.reportEvent({
				name: 'platform',
				ext1: 'platform-APP',
				ext2: 'uniTuikitExternal',
				ext3: `${SDKAppID}`
			})
			// #endif
			// #ifdef MP-WEIXIN
			uni.$aegis.reportEvent({
				name: 'platform',
				ext1: 'platform-MP-WEIXIN',
				ext2: 'uniTuikitExternal',
				ext3: `${SDKAppID}`
			})
			// #endif
			// #ifdef H5
			uni.$aegis.reportEvent({
				name: 'platform',
				ext1: 'platform-H5',
				ext2: 'uniTuikitExternal',
				ext3: `${SDKAppID}`
			})
			uni.showToast({
				title: 'TUIKit 暂不支持 H5 / web ，请使用者自己完成兼容哦～ ',
				icon: 'none',
				duration: 3000
			})
			// #endif
			app.globalData.userInfo = {
				userSig,
				userID
			}
			setTokenStorage({
				userInfo: app.globalData.userInfo
			})
			wx.setStorageSync(`TIM_${getApp().SDKAppID}_isTUIKit`, true)
			uni.$TUIKit
				.login({
					userID: userID,
					userSig: userSig
				})
				.then(() => {
					uni.$aegis.reportEvent({
						name: 'login',
						ext1: 'login-success',
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`
					})
				})
				.catch(error => {
					uni.$aegis.reportEvent({
						name: 'login',
						ext1: `login-failed#error:${error}`,
						ext2: 'uniTuikitExternal',
						ext3: `${SDKAppID}`
					})
				})

			// 登录原生插件
			// #ifdef APP-PLUS
			if (typeof uni.$TUICalling == 'undefined') {
				uni.showToast({
					title: '如果需要音视频功能，请集成插件使用真机运行并且自定义基座调试哦～',
					icon: 'none',
					duration: 3000
				})
				logger.error(
					'请使用真机运行并且自定义基座调试，否则影响音视频功能～ 插件地址：https://ext.dcloud.net.cn/plugin?id=7097 , 调试地址：https://nativesupport.dcloud.net.cn/NativePlugin/use/use'
				)
			} else {
				uni.$TUICalling.login(
					{
						sdkAppID: SDKAppID,
						userID: userID,
						userSig: userSig
					},
					res => {
						console.log(JSON.stringify(res.msg))
						uni.showToast({
							title: 'login',
							icon: 'none'
						})
					}
				)
			}

			// #endif

			//登录成功后调转页面
			uni.navigateTo({
				url: '../TUI-Index/index'
			})
		},

		/* 获取消息列表 */
		getMessage(conversationId) {
			var that = this
			console.log('消息列表 的--conversationId----', conversationId)
			console.log('消息列表 的--to----', that.to)
			that.tim
				.getMessageList({
					conversationID: conversationId,
					count: 15
				})
				.then(function(res) {
					console.log('消息列表', res)

					//判断是否有交换微信信息 如果有则标记
					res.data.messageList.forEach((item, index) => {
						if (item.payload.data == 'refuseResume' || item.payload.data == 'resume') {
							that.resumeFlag = true
						} else if (item.payload.data == 'fromWechat' || item.payload.data == 'refuseWechat') {
							that.weChatFlag = true
						}
						if (item.payload.imageInfoArray && item.payload.imageInfoArray.length) {
							item.payload.imageInfoArray.forEach(function(e1, idx1) {
								if (e1.size != 0) {
									console.log(e1.imageUrl)
									item['imageUrl'] = e1.imageUrl
									that.imgList.push(item.imageUrl)
								}
							})
						}
					})
					that.messageData = res.data
					that.currentMessage = 'id' + (that.messageData.messageList.length - 1)
					that.$forceUpdate()
				})
		},
		/* 发送文本消息 */
		async sendMessage() {
			var that = this
			await this.loginTIM(uni.getStorageSync('openid'))
			console.log('准备发送')
			let message = that.tim.createTextMessage({
				to: that.to,
				conversationType: TIM.TYPES.CONV_C2C,
				payload: {
					text: that.message
				}
			})
			that.tim
				.sendMessage(message)
				.then(function(res) {
					console.log(res, '发送成功')
					that.message = ''
					that.getMessage(that.conversationId)
				})
				.catch(function(e) {
					console.log(e)
				})
			// 				let onSdkReady = function(event) {
			// console.log('准备发送中')

			// 				};
			// 				that.tim.on(TIM.EVENT.SDK_READY, onSdkReady);
		},
		/* 获取个人资料 */
		getMyProfile() {
			var that = this
			let onSdkReady = function(event) {
				that.tim.getMyProfile().then(function(res) {
					console.log('资料---', res.data)
					that.myProfile = res.data
					that.conversationId = 'C2C' + that.to
					//获取消息列表
					that.getMessage(that.conversationId)
				})
			}
			that.tim.on(TIM.EVENT.SDK_READY, onSdkReady)
		},
		/* 下拉查看消息 */
		refresh() {
			var that = this
			that.refreshFlag = true
			if (!that.messageData.isCompleted) {
				that.getHistoryMessage()
			} else {
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
				setTimeout(function() {
					that.refreshFlag = false
				}, 1000)
			}
		},

		/* 获取历史消息 */
		getHistoryMessage() {
			var that = this
			that.tim
				.getMessageList({
					conversationID: that.conversationId,
					nextReqMessageID: that.messageData.nextReqMessageID,
					count: 15
				})
				.then(function(res) {
					that.messageData.isCompleted = res.data.isCompleted
					that.messageData.nextReqMessageID = res.data.nextReqMessageID
					that.messageData.messageList.unshift(...res.data.messageList)
					that.refreshFlag = false
					//判断是否有交换微信信息 如果有则标记
					res.data.messageList.forEach((item, index) => {
						if (item.payload.data == 'refuseResume' || item.payload.data == 'resume') {
							that.resumeFlag = true
						} else if (item.payload.data == 'fromWechat' || item.payload.data == 'refuseWechat') {
							that.weChatFlag = true
						}
					})
				})
		},
		/* 清空未读消息 */
		clearUnRead() {
			var that = this
			this.tim
				.setMessageRead({
					conversationID: that.conversationId
				})
				.then(function(res) {
					console.log('清空未读', res)
				})
		},
		/* 发送简历 */
		sendResume() {
			//创建简历消息
			var that = this
			let message = that.tim.createCustomMessage({
				to: that.userId,
				conversationType: TIM.TYPES.CONV_C2C,
				payload: {
					data: 'resume',
					description: '简历已发送至对方邮箱',
					extension: ''
				}
			})
			that.tim.sendMessage(message).then(function(res) {
				uni.showToast({
					title: '简历已发送',
					icon: 'none'
				})
				that.getMessage(that.conversationId)
			})
		},
		/* 交换微信 */
		sendWeChat() {
			//创建微信号消息
			var that = this
			let message = that.tim.createCustomMessage({
				to: that.userId,
				conversationType: TIM.TYPES.CONV_C2C,
				payload: {
					data: 'wechat',
					description: 'yt54339',
					extension: ''
				}
			})
			that.tim.sendMessage(message).then(function(res) {
				uni.showToast({
					title: '请求交换微信',
					icon: 'none'
				})
				that.getMessage(that.conversationId)
			})
		},
		/* 发电话 */
		sendPhone() {
			//创建手机号消息
			var that = this
			let message = that.tim.createCustomMessage({
				to: that.userId,
				conversationType: TIM.TYPES.CONV_C2C,
				payload: {
					data: 'phone',
					description: '15288879672',
					extension: ''
				}
			})
			that.tim.sendMessage(message).then(function(res) {
				uni.showToast({
					title: '请求交换电话',
					icon: 'none'
				})
				that.getMessage(that.conversationId)
			})
		},
		/* 不合适 */
		sendRefuse() {
			var that = this
			let message = that.tim.createCustomMessage({
				to: that.userId,
				conversationType: TIM.TYPES.CONV_C2C,
				payload: {
					data: 'refuse',
					description: '123',
					extension: ''
				}
			})
			that.tim.sendMessage(message).then(function(res) {
				uni.showToast({
					title: '已标记不合适',
					icon: 'none'
				})
				that.getMessage(that.conversationId)
			})
		},
		/* 复制微信号 */
		copyWeChat(value) {
			uni.setClipboardData({
				data: value,
				success: function() {
					uni.showToast({
						title: '已复制到剪切板',
						icon: 'none'
					})
				}
			})
		},
		/* 拒绝发送简历 */
		sendRefuseResume() {
			var that = this
			let message = that.tim.createCustomMessage({
				to: that.userId,
				conversationType: TIM.TYPES.CONV_C2C,
				payload: {
					data: 'refuseResume',
					description: '',
					extension: ''
				}
			})
			that.tim.sendMessage(message).then(function(res) {
				uni.showToast({
					title: '已拒绝对方请求',
					icon: 'none'
				})
				that.getMessage(that.conversationId)
			})
		},
		/* 显示表情 */
		emojiShowClick() {
			var that = this
			this.emojiShow = !this.emojiShow
			if (this.emojiShow) {
				this.moreShow = false
				that.currentMessage = 'id' + (that.messageData.messageList.length - 2)
			} else {
				that.currentMessage = 'id' + (that.messageData.messageList.length - 1)
			}
		},
		/* 选择表情 */
		emojiClick(item) {
			this.message += item
		},
		/* 更多 */
		moreShowClick() {
			var that = this
			this.moreShow = !this.moreShow
			if (this.moreShow) {
				this.emojiShow = false
				that.currentMessage = 'id' + (that.messageData.messageList.length - 2)
			} else {
				that.currentMessage = 'id' + (that.messageData.messageList.length - 1)
			}
		},
		/* 发送图片*/
		sendImage() {
			var that = this
			uni.chooseImage({
				count: 1,
				success: function(res) {
					console.log('图片', res)
					console.log(that.tim)
					let message = that.tim.createImageMessage({
						to: that.to,
						conversationType: TIM.TYPES.CONV_C2C,
						payload: {
							file: res
						},
						onProgress: function(event) {
							setTimeout(function() {
								that.getMessage(that.conversationId)
							}, 1500)

							console.log('file uploading:123', event)
						}
					})

					that.tim.sendMessage(message)
					setTimeout(function() {
						that.getMessage(that.conversationId)
					}, 1500)
				}
			})
			setTimeout(function() {
				that.getMessage(that.conversationId)
			}, 1500)
		},
		/* 开始录音 */
		startVioce() {
			uni.showLoading({
				title: '录音中...'
			})
			this.timer = setInterval(() => {
				this.intervalTime += 0.5
				if (this.intervalTime >= 0.5 && !this.isRecord) {
					console.log('开始录音')
					this.isRecord = true
					this.intervalTime = 0
					recorderManager.start({
						format: 'mp3'
					})
				}
			}, 500)
		},
		/* 结束录音 */
		endVioce() {
			uni.hideLoading()
			var that = this
			if (this.intervalTime <= 0.5) {
				uni.showToast({
					title: '录音太短了',
					icon: 'error'
				})
				this.sendVioceFlag = false
				clearInterval(this.timer)
				recorderManager.stop()
				this.isRecord = false
			} else {
				this.sendVioceFlag = true
				clearInterval(this.timer)
				if (this.isRecord) {
					setTimeout(() => {
						console.log('结束')
						recorderManager.stop()
						this.isRecord = false
					}, 500) //延迟小段时间停止录音, 更好的体验
				}
			}
		},
		/* 播放语音 */
		playVioce(voicePath) {
			innerAudioContext.src = voicePath
			innerAudioContext.play()
		},
		/* 发送视频 */
		sendVideo() {
			var that = this
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera', 'album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
				maxDuration: 60, // 设置最长时间60s
				camera: 'back', // 后置摄像头
				success: function(res) {
					let message = that.tim.createVideoMessage({
						to: that.userId,
						conversationType: TIM.TYPES.CONV_C2C,
						payload: {
							file: res
						},
						onProgress: function(event) {
							console.log('file uploading:', event)
						}
					})
					// 2. 发送消息
					that.tim.sendMessage(message).then(function(imResponse) {
						// 发送成功
						console.log('视频发送成功')
						that.getMessage(that.conversationId)
					})
				}
			})
		},
		/* 视频通话 */
		call() {
			//sdkAppID自己申请
			var userID = new Date()
				.getTime()
				.toString(16)
				.split('')
				.reverse()
				.join('')
			var userSig = genTestUserSig(userID).userSig
			uni.navigateTo({
				url: '../trtc_room/trtc_room?roomID=1234&&sdkAppID=xxxxx&&userID=' + userID + '&&userSig=' + userSig
			})
		},
		onMessageReceived(msg) {
			this.getMessage(this.conversationId)
		}
	}
}
</script>

<style>
@font-face {
	font-family: 'iconfont';
	/* Project id 2819500 */
	src: url('https://at.alicdn.com/t/font_2819500_0yamocn6pku.woff2?t=1640227023816') format('woff2'),
		url('https://at.alicdn.com/t/font_2819500_0yamocn6pku.woff?t=1640227023816') format('woff'),
		url('https://at.alicdn.com/t/font_2819500_0yamocn6pku.ttf?t=1640227023816') format('truetype');
}

page {
	background-color: #f5f5f5;
	height: 100%;
}

.minTop {
	width: 100%;
	height: 150upx;
	background: url(https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/bg.png);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 30upx;
}

.a1 {
	font-family: iconfont;
	color: #ffffff;
	font-size: 40upx;
	margin-right: 20upx;
	margin-top: 70upx;
}

.a2 {
	text-align: center;
	color: #ffffff;
	width: 75%;
}

.a3 {
	font-size: 32upx;
	margin-top: 70upx;
}

.a4 {
	font-size: 20upx;
	margin-top: 10upx;
}

.a5 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	height: 8%;
	align-items: center;
	background-color: #ffffff;
}

.a6 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.a7 {
	font-family: iconfont;
	font-size: 40upx;
	color: #4dc9c0;
}

.a7_1 {
	font-family: iconfont;
	font-size: 40upx;
	color: #c0c0c0;
}

.a8 {
	font-size: 22upx;
	margin-top: 15upx;
}

.a8_1 {
	font-size: 22upx;
	margin-top: 15upx;
	color: #c0c0c0;
}

.a9 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.b1 {
	font-family: iconfont;
	font-size: 50upx;
	color: #3fcf77;
}

.b1_1 {
	font-family: iconfont;
	font-size: 50upx;
	color: #c0c0c0;
}

.b2 {
	font-size: 22upx;
	margin-top: 10upx;
}

.b2_1 {
	font-size: 22upx;
	margin-top: 10upx;
	color: #c0c0c0;
}

.b3 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.b4 {
	font-family: iconfont;
	font-size: 50upx;
	color: #e8a541;
}

.b5 {
	font-size: 22upx;
	margin-top: 10upx;
}

.b6 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.b7 {
	font-family: iconfont;
	font-size: 40upx;
	color: #f76f3f;
}

.b8 {
	font-size: 22upx;
	margin-top: 20upx;
}

.b9 {
	height: 5%;
	background-color: #fff1f1;
	color: #ff8f8f;
	font-size: 22upx;
	text-align: center;
	line-height: 80upx;
}

.c1 {
	display: flex;
	flex-direction: row;
	margin-top: 30upx;
	padding-left: 30upx;
}

.c1_2 {
	display: flex;
	flex-direction: row;
	margin-top: 30upx;
}

.c2 {
	width: 80upx;
	height: 80upx;
}

.c3 {
	border-radius: 15upx;
	background-color: #ffffff;
	margin-left: 30upx;
}

.c3_1 {
	border-radius: 15upx;
	background-color: #9eea6a;
	margin-right: 30upx;
}

.c3_2 {
	border-radius: 15upx;
	background-color: #ffffff;
	margin: 0 auto;
}

.c4 {
	width: 0;
	height: 0;
	border-top: 8upx solid transparent;
	border-right: 8px solid #ffffff;
	border-bottom: 8upx solid transparent;
	position: relative;
	left: -13upx;
	top: 30upx;
}

.c4_1 {
	width: 0;
	height: 0;
	border-top: 8upx solid transparent;
	border-left: 8upx solid #9eea6a;
	border-bottom: 8upx solid transparent;
	position: relative;
	top: 30upx;
	left: -30upx;
}

.c5 {
	color: #000000;
	font-size: 24upx;
	padding-left: 15upx;
	padding-right: 15upx;
	letter-spacing: 2upx;
	max-width: 410upx;
	padding-bottom: 15upx;
	padding-top: 10upx;
}

.c5_1 {
	color: #000000;
	font-size: 24upx;
	padding-left: 15upx;
	padding-right: 15upx;
	letter-spacing: 2upx;
	max-width: 400upx;
	padding-bottom: 15upx;
	padding-top: 20upx;
}

.c6 {
	display: flex;
	flex-direction: row;
	background-color: #ffffff;
	height: 10%;
	width: 100%;
	margin: 0 auto;
	align-items: center;
	justify-content: space-around;
}

.c7 {
	font-family: iconfont;
	font-size: 50upx;
}

.c8 {
	width: 420upx;
	background-color: #f5f5f5;
	height: 60upx;
	margin-left: 20upx;
	border-radius: 15upx;
	font-size: 24upx;
	padding-left: 10upx;
}

.c9 {
	font-family: iconfont;
	font-size: 50upx;
	margin-left: 10upx;
	color: #ee8b1f;
}

.d1 {
	text-align: center;
	height: 60upx;
	line-height: 60upx;
	background-color: #08c05e;
	font-size: 24upx;
	color: #ffffff;
	width: 100upx;
	border-radius: 15upx;
	margin-left: 10upx;
}

.d2 {
	font-family: iconfont;
	font-size: 50upx;
	margin-left: 10upx;
	color: #ee8b1f;
}

.c8_1 {
	width: 450upx;
	background-color: #f5f5f5;
	height: 60upx;
	margin-left: 20upx;
	border-radius: 15upx;
	font-size: 24upx;
	padding-left: 10upx;
}

.e2_1 {
	height: 60upx;
	line-height: 60upx;
	font-size: 28upx;
	color: #08c05e;
	width: 100%;
	text-align: center;
}

.d3 {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding-right: 30upx;
	margin-top: 30upx;
}

.v1 {
	height: calc(100vh - 180upx - 120upx - 70upx - 200upx);
}

.v2 {
	height: calc(100vh - 150upx - 120upx - 70upx - 200upx);
}

.d4 {
	text-align: center;
	font-size: 20upx;
	color: #b9b9b9;
	height: 100upx;
	line-height: 100upx;
}

.d5 {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1upx solid #f1f1f1;
	height: 100upx;
}

.d6 {
	width: 60upx;
	height: 60upx;
}

.d7 {
	padding-left: 10upx;
	text-align: left;
}

.d8 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-left: 70upx;
	padding-right: 70upx;
	align-items: center;
	padding-top: 20upx;
}

.d9 {
	height: 60upx;
	line-height: 60upx;
	font-size: 28upx;
	color: #c0c0c0;
}

.e1 {
	height: 50upx;
	width: 1upx;
	background-color: #f1f1f1;
}

.e2 {
	height: 60upx;
	line-height: 60upx;
	font-size: 28upx;
	color: #18bc37;
}

.e2_1 {
	height: 60upx;
	line-height: 60upx;
	font-size: 28upx;
	color: #08c05e;
	width: 100%;
	text-align: center;
}

.e2_2 {
	height: 60upx;
	line-height: 60upx;
	font-size: 28upx;
	color: #c0c0c0;
}

.c5_2 {
	color: #c0c0c0;
	font-size: 24upx;
	padding-left: 15upx;
	padding-right: 15upx;
	letter-spacing: 2upx;
	max-width: 410upx;
	padding-bottom: 15upx;
	padding-top: 10upx;
}

.emoji {
	display: flex;
	flex-direction: row;
	height: 15%;
	flex-wrap: wrap;
	overflow-y: scroll;
	background-color: #ffffff;
}

.sv {
	height: 77%;
}

.sv_emoji {
	height: 65%;
}

.emoji_img {
	margin-left: 20upx;
	margin-top: 10upx;
	font-size: 34upx;
}

.e3 {
	display: flex;
	flex-direction: row;
	height: 15%;
	flex-wrap: wrap;
	overflow-y: scroll;
	background-color: #ffffff;
	justify-content: space-around;
	font-size: 24upx;
	color: #666666;
}

.e4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 150upx;
}

.e5 {
	font-family: iconfont;
	font-size: 50upx;
}

.e5_1 {
	font-family: iconfont;
	font-size: 50upx;
	color: #ee8b1f;
}

.e6 {
	margin-top: 20upx;
}
</style>
